<!DOCTYPE HTML>
<html lang="en">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title>Xero | Premium XHTML &amp; CSS Template By TahaH Studio</title>
<meta name="description" content="A premium (X)HTML &amp; CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all">
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<!--
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/yellow.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/cream.css" media="screen">
-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="js/xero.js"></script>
<script type="text/javascript" src="js/jquery.formlabels.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("a.play").colorbox({iframe:true, innerWidth:792, innerHeight:294});
	$("a.zoom").colorbox({rel:'folio2'});
});
</script>
</head>
<body>
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> <a href="index.html">Xero HTML &amp; CSS Template</a> </h1>
			<!-- end logo -->
			
			<ul id="nav">
				<li><a href="index.html"><span>Home</span></a></li>
				<li><a href="#"><span>Pages</span></a>
					<ul class="subnav">
						<li><a href="html-elements.html">HTML Elements Test</a></li>
						<li><a href="full-width.html">Full Width</a></li>
						<li><a href="#">Pages Options</a>
							<ul class="subnav">
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="sidebar-right.html">Sidebar Right</a></li>
							</ul>
						</li>
						<li><a href="#">Dropdown</a>
							<ul class="subnav">
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a>
									<ul class="subnav">
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
									</ul>
									<!-- end 3rd sub navigation --> 
								</li>
							</ul>
							<!-- end 2nd sub navigation --> 
						</li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Blog</span></a>
					<ul class="subnav">
						<li><a href="blog.html">Blog Page</a></li>
						<li><a href="single-post.html">Single Post</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#" class="current"><span>Portfolio</span></a>
					<ul class="subnav">
						<li><a href="portfolio-1.html">Portfolio Style 1</a></li>
						<li><a href="portfolio-2.html">Portfolio Style 2</a></li>
						<li><a href="portfolio-3.html">Portfolio Style 3</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="contact.php"><span>Contact</span></a></li>
			</ul>
			<!-- end main navigation -->
			
			<div class="clear"></div>
			<!-- clears floted logo & nav -->
			
			<div id="page_title">
				<ul class="breadcrumb_nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Portfolio</a></li>
				</ul>
				<h1>Portfolio Option 2</h1>
			</div>
		</div>
		<!-- end header (940px width) --> 
	</div>
	<!-- end header container (100% width) -->
	
	<div id="body_content">
		<div id="content" class="">
			<div class="full">
				<h2 class="noBottomMargin">Images Thumbnails<em class="heading_description">A portfolio option that lets you an image galley for each project thumbnail</em></h2>
			</div>
			<!-- end full width container -->
			
			<ul id="folio2">
				<li class="half">
					<a class="play" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294">
					<img src="images/portfolio/flash_on.jpg" alt="Flash On">
					</a>
				</li>
				<!-- end half width image -->
				
				<li class="half">
					<a class="zoom" href="images/16-dropdowntest.jpg" rel="folio2">
						<img src="images/portfolio_long.jpg" alt="My Own Project">
					</a>
				</li>
				<!-- end half width image -->
				
				<li class="quart">
					<a class="external" href="http://themeforest.net" target="_blank">
						<img src="images/portfolio_thumb.jpg" alt="My Own Project">
					</a>
				</li>
				<!-- end quart width image -->
				
				<li class="quart">
					<a class="external" href="http://themeforest.net" target="_blank">
						<img src="images/portfolio_thumb.jpg" alt="My Own Project">
					</a>
				</li>
				<!-- end quart width image -->
				
				<li class="quart">
					<a class="external" href="http://themeforest.net" target="_blank">
						<img src="images/portfolio_thumb.jpg" alt="My Own Project">
					</a>
				</li>
				<!-- end quart width image -->
				
				<li class="quart">
					<a class="external" href="http://themeforest.net" target="_blank">
						<img src="images/portfolio_thumb.jpg" alt="My Own Project">
					</a>
				</li>
				<!-- end quart width image -->
			</ul>
			
			<div class="full">
				<ul class="pagination">
					<li><a href="#" class="large_button">&laquo; Pravious</a></li>
					<li><a href="#" class="large_button current">1</a></li>
					<li><a href="#" class="large_button">2</a></li>
					<li><a href="#" class="large_button">3</a></li>
					<li><a href="#" class="large_button">4</a></li>
					<li><a href="#" class="large_button">5</a></li>
					<li><a href="#" class="large_button">Next &raquo;</a></li>
				</ul>
			</div>
		</div>
		<!-- end content --> 
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			<ul class="copyright_info reset_style">
				<li><img src="images/xero_logos/footer_logo.png" alt="" id="footer_logo" class="reset_style center"></li>
				<li>A Theme By <a href="http://wizylabs.com">Wizy Labs</a>. Copyright &copy; 2010</li>
			</ul>
			<!-- end copyright info, copyright info can be changed as desired -->
			
			<div class="footer_nav_container">
				<ul class="footer_nav reset_style">
					<li><a href="#">Home</a> /</li>
					<li><a href="#">About</a> /</li>
					<li><a href="#">Advertise</a> /</li>
					<li><a href="#">Contact</a> /</li>
					<li><a href="#">Icons by IconDock</a></li>
				</ul>
				<!-- end footer nav -->
				
				<ul class="social_profiles reset_style">
					<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
					<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
					<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
					<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
					<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
				</ul>
				<!-- end social profiles nav -->
			</div>
		</div>
		<!-- end actual footer -->
	</div>
	<!-- end footer container -->
</div>
<!-- end wrapper -->
</body>
</html>